<template>
  <el-container>
    <el-header class="header" style="height: 300px;">
      <div style="margin-top: 10px;float: right">
        <el-avatar icon="el-icon-user-solid" ></el-avatar>
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{userInfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">用户信息</el-dropdown-item>
            <el-dropdown-item command="b">修改密码</el-dropdown-item>
<!--            <el-dropdown-item command="d" v-if="userInfo.isAdmin">切换到管理员界面</el-dropdown-item>-->
            <el-dropdown-item command="c">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <img src="../assets/logo_1.png" style="margin-top: 80px;margin-left: 40px" width="800" height="130"/>
    </el-header>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#336699"
      text-color="#fff"
      router
      :default-active="$route.path"
      active-text-color="#ffd04b"
      style="margin-top: -20px">
      <el-menu-item style="margin-left: 30px"  index="/user/noticeList" @click.native="tab('通知列表')">通知列表</el-menu-item>
      <el-menu-item index="/user/wage" @click.native="tab('工资查询')">工资查询</el-menu-item>

    </el-menu>
    <el-main style="background-color:#fff;margin: 10px 10px 10px 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 2px">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 15px">
        <el-breadcrumb-item v-if="title != ''">{{title}}</el-breadcrumb-item>
      </el-breadcrumb>
      <router-view></router-view>
    </el-main>
    <el-footer style="height: 60px;background-color: #1369b1;color: #fff;line-height: 60px">
      ©&nbsp;2019&nbsp;-&nbsp;常德人民检察院工资查询系统&nbsp;&nbsp;|&nbsp;&nbsp;常德人民检察院版权
    </el-footer>

    <el-dialog title="修改密码" :visible.sync="updatePwdDialogShow">
      <el-form>
        <el-form-item label="旧密码" prop="password">
          <el-input placeholder="请输入旧密码" v-model="updatePWD.password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input placeholder="请输入新密码" v-model="updatePWD.newPassword" autocomplete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatePwdDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="updatePwd">修 改</el-button>
      </div>
    </el-dialog>

    <el-dialog title="用户信息" :visible.sync="userInfoDialogShow" width="400px">
      <el-form
        size="mini"
        :model="userInfo" label-position="right" label-width="170px" style="text-align: left">
        <el-form-item label="姓名:">
          {{userInfo.name}}
        </el-form-item>
        <el-form-item label="身份证号:">
          {{userInfo.identityCard}}
        </el-form-item>
        <el-form-item label="注册时间:">
          {{getTime(userInfo.createTime)}}
        </el-form-item>
        <el-form-item label="是否为管理员:">
          <span v-if="userInfo.isAdmin">是</span>
          <span v-else>否</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
    import {info,psw} from '../axios/api'
    export default {
        name: "userPage",
        data(){
            return{
                updatePwdDialogShow:false,
                userInfoDialogShow:false,
                title:"通知列表",
                userInfo:{},
                updatePWD:{
                    password:"",
                    newPassword:""
                }
            }
        },
        mounted() {
            //判断面包屑是否存在
            if (this.isStorage("userMbx")){
                this.title = localStorage.getItem("userMbx")
            }
            //判断是否退出登陆
            if (!this.isStorage("token")){
                this.alert("warning","token不存在，请重新登陆！");
                this.$router.push({ path:'/login'})
            }
            this.getUserInfo();
        },
        methods:{
            getUserInfo:async function(){
                let res = await info()
                // console.log(res)
                this.userInfo = res.data;
            },
            updatePwd:async function(){
                if (this.updatePWD.newPassword == "" || this.updatePWD.password == ""){
                    this.alert("warning","请将表单填充完整！");
                    return;
                }
                let res = await psw(this.updatePWD)
                if(res.code == 0){
                    this.alert("success","修改成功！")
                }
            },
            tab(title){
                this.title = title;
                localStorage.setItem("userMbx",this.title)
            },
            handleCommand(command) {
                switch (command) {
                    case "a":
                        this.userInfoDialogShow = true;
                        break;
                    case "b":
                        this.updatePwdDialogShow = true;
                        break;
                    case "c":
                        localStorage.setItem("token", "");
                        localStorage.setItem("userMbx",'');
                        localStorage.setItem("userName","");
                        this.$router.push({path: '/login'});
                        this.alert("success", "已安全退出！");
                        break;
                    case "d":
                        this.$router.push({ path:'/admin'})
                        break;
                }
            },
        }
    }
</script>

<style>
  html{
    background-color: #E9EEF3;
  }
  .header{
    background-image: url("../assets/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown{
    position: relative;
    bottom: 14px;
    font-size: 16px;
    left: 4px;
  }
</style>
